<template>
  <h1>隐藏显示指令</h1>
  <!-- v-if="布尔值" true元素显示 false元素消失
  false表示该元素不会被渲染到DOM中,会直接跳过这部分内容的渲染 -->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <p>王五</p>
  <hr>
  <p v-if="isShow">月亮</p>
  <p v-if="isShow">星星</p>
  <!-- v-else是v-if取反 它会找离自己最近的v-if进行取反 -->
  <p v-else>太阳</p>
  <hr>
  <!-- v-if是直接在DOM中跳过该元素渲染,HTML代码中没有该元素 -->
  <p v-if="false">小绿</p>
  <!-- v-show是修改元素的CSS属性display:none;在频繁切换是否显示时才推荐,性能更好 -->
  <p v-show="false">小红</p>
</template>

<script setup>
import {ref} from "vue";

const isShow = ref(false);
</script>

<style scoped>

</style>